<template>
    <div>
      <div class="outBox">
        <div class="comment">
          <img src="../../assets/helpServerIcon/red.png" alt="" style="width:1vw;height:2.67vw;">
          <span style="font-size:15px;margin-left:2vw;">评论</span>
        </div>
        <div class="reviews" v-for="(v,i) in userReviews" :key="i">
          <img :src="v.userHeadIcon" alt="">
          <p>{{v.userName}}</p>
          <div class="fabulous">
           <!-- <span class="animate">+1</span>-->
            <div v-if="show">
              <img src="../../assets/helpServerIcon/fabulous.png" alt="" @click="zan(i)">
              <p>赞</p>
            </div>
            <div v-else>
              <img src="../../assets/helpServerIcon/red_fabulous.png" alt="" @click="deleteZan(i)">
              <p>{{v.fabulousNumber}}</p>
            </div>
          </div>
          <p class="commentContent">{{v.comment_content}}</p>
          <div class="commentTime">{{v.comment_time}} <span>回复</span></div>
          <div class="reply">
            <p class="replyContent"><span>{{v.replyName}}&nbsp;:&nbsp;</span>{{v.replyContent}}</p>
            <p style="color:#FF4C50;">查看全部回复</p> <img src="../../assets/helpServerIcon/ic.png" alt="">
          </div>
          <div class="clear"></div>
        </div>
        <div class="allComment">
          查看全部评论
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "userReviews",
      props:["userReviews"],
      data(){
         return{
           show:true,
         }
      },
      methods:{
          zan:function(i){
            this.show = !this.show;
          },
          deleteZan:function(i){
            this.show = !this.show;
        }
      }
    }
</script>

<style lang="scss">
.outBox{
  width:100vw;
  margin:0px auto;
  border-bottom:1px solid #CECECE;
}
.comment{
  width:92vw;
  height:13vw;
  border-bottom:1px solid #cecece;
  padding-top:4.17vw;
  margin:0px auto;
}
.reviews{
  margin:0px auto;
  width:92vw;
  padding-top:2.3vw;
    img{
      width:8vw;
      height:8vw;
      float:left;
    }
    p{
      font-size:12px;
      float:left;
      margin-left:2vw;
      margin-top:1.6vw;
      color:#666666;
    }
}
.fabulous{
  float:right;
  img{
    width:4vw;
    height:4.3vw;
    margin-top:2.3vw;
  }
  p{
    font-size:15px;
  }
}
.commentContent{
  width:81.87vw;
  float:right;
}
.commentTime{
  width:79.47vw;
  float:right;
  font-size:12px;
  margin-right:2.9vw;
  margin-top:1vw;
  margin-bottom:1vw;
  color:#666666;
    span{
      float:right;
    }
}
.reply{
  width:81.87vw;
  height:13.33vw;
  background:#f5f5f5;
  float:right;
  font-size:12px;
  color:#666666;
  img{
    height:2.13vw;
    width:1.33vw;
    margin-top: 3vw;
    margin-left: 1vw;
  }
}
.allComment{
  width:92vw;
  height:10.67vw;
  border-top:1px solid #f5f5f5;
  line-height:10.67vw;
  text-align:center;
  font-size:12px;
  color:#666666;
  margin:0px auto;
  margin-top:2.5vw;
}
</style>
